<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="table">
    <div class="bbs">
      <!-- 增加button -->
      <button class="btn_add" (click)="showinput()"></button>
      <!-- 批量下载 -->
      <nz-upload
        [nzCustomRequest]="customRequest"
        [nzAccept]="'.xlsx,.xls'"
        [nzShowUploadList]="false"
        >
        <button nz-button class="custom-upload-button" style="margin-left: 10px;">
          <!-- <span nz-icon nzType="upload"></span> -->
          批量添加
        </button>
      </nz-upload>
      <!-- 下載模板 -->
      <button nz-button nzType="primary" 
       class="custom-upload-button" style="margin-left: 10px;"
       (click)="downloadTemplate()"
       >
        <!-- <span nz-icon nzType="download"></span> -->
        下載模板
      </button>
    </div>
    <!-- 头部Table -->
    <nz-table #headerTable style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;" [nzData]="listOfData"
      class="designTable" [nzShowPagination]='false' [nzScroll]="{ y: '700px',x: '1710px' }">
      <thead class="tableHeard">
        <tr style="text-align: center !important;">
          <th nzWidth="120px" nzLeft="0px">申請狀態</th>
          <th nzWidth="50px" nzLeft="119px"></th>
          <th nzWidth="50px" nzLeft="169px"></th>
          <th nzWidth="140px">申請單號</th>
          <th nzWidth="240px">串聯單號</th>
          <th nzWidth="220px">料號</th>
          <th nzWidth="230px">名稱</th>
          <th nzWidth="100px">單位</th>
          <th nzWidth="100px">現有庫存</th>
          <th nzWidth="100px">單據類型</th>
          <th nzWidth="150px">費用Charge部門</th>
          <th nzWidth="100px">申請人</th>
          <th nzWidth="100px">數量</th>
          <th nzWidth="150px">備註</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <!-- 新增 -->
        <tr class="tr_hover" id="addcnc" *ngIf="isShow">
          <td class="input_first" style="padding:5px 8px;" nzLeft="0px"></td>
          <!-- 确认按钮 -->
          <td style="width:50px;padding:5px 8px;" nzLeft="119px">
            <button nz-button [nzType]="'primary'" class="confirmAdd" (click)="confirmAdd()"></button>
          </td>
          <!-- 取消按钮 -->
          <td style="width:50px;padding:5px 8px;" nzLeft="169px">
            <button nz-button [nzType]="'primary'" class="cancelAdd" (click)="cancelAdd()"></button>
          </td>
          <!-- 申請單號 -->
          <td class="input_first" style="padding:5px 8px;"><input style="width: 140px;text-indent: 12px;" name=''
              readonly="readonly"></td>
          <td class="input_first" style="padding:5px 8px;">
            <!-- <input [(ngModel)]="material_no" (ngModelChange)="pushinfo()" style="width: 220px;text-indent: 12px;" name=''> -->
            <input [(ngModel)]="union_order" style="width: 240px;text-indent: 12px;" name=''>
          </td>
          <!-- 料号 -->
          <td class="input_first" style="padding:5px 8px;">
            <!-- <input [(ngModel)]="material_no" (ngModelChange)="pushinfo()" style="width: 220px;text-indent: 12px;" name=''> -->
            <input [(ngModel)]="material_no" style="width: 220px;text-indent: 12px;" name='' (blur)="check()">
          </td>
          <!-- 名称 -->
          <td class="input_first" style="padding:5px 8px;">
            <input [(ngModel)]="name" style="width: 230px;text-indent: 12px;" name='' readonly="readonly">
          </td>
          <!-- 單位 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="unit"
              style="width: 100px;text-indent: 12px;" name='' readonly="readonly"></td>
          <!-- 現有庫存 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="stock"
              style="width: 100px;text-indent: 12px;" name='' readonly="readonly"></td>
          <!-- 單據類型 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="applyType"
              style="width: 100px;text-indent: 12px;" name='' readonly="readonly"></td>
          <!-- 費用Charge部門 -->
          <td class="input_first" style="padding:5px 8px;">
            <nz-select [(ngModel)]="charge_department">
              <nz-option *ngFor="let item of chargeArr" [nzLabel]=item [nzValue]=item></nz-option>
            </nz-select>
          </td>
          <!-- 申請人 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="applicant"
              style="width: 100px;text-indent: 12px;" name=''></td>
          <!-- 數量 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="quatity" type="number" min="1"
              style="width: 100px;text-indent: 12px;" name=''></td>
          <!-- 備註 -->
          <td class="input_first" style="padding:5px 8px;"><input [(ngModel)]="remark"
              style="width: 150px;text-indent: 12px;" name=''></td>
          <!-- 申請狀態 -->
        </tr>
        <tr id="first" *ngFor="let item of listOfData let key = index">
          <!-- 审核 -->
          <td style="cursor: pointer;">
            <a class="addChecker" (click)="addChecker(item)" *ngIf="item.status == ''"></a>
            <div *ngIf="item.status != ''">
              <span *ngIf="item.status=='true'" style="color:green" title={{item.checker}}>通过</span>
              <span *ngIf="item.status=='false'" style="color:red" title={{item.checker}}>拒绝</span>
            </div>
          </td>
          <!-- 编辑按钮 -->
          <td nzLeft="0px" style="width: 49px;">
            <div class="editable-row-operations" style="width: 45px;">
              <ng-container *ngIf="editCache[key].edit; else saveTpl">
                <a style="width: 45px;" (click)="startEdit(key)"><img
                    src="../../../assets/image/icon_edit_white.svg"></a>
              </ng-container>
              <ng-template #saveTpl>
                <a style="width: 45px;" (click)="saveEdit(key)"><img src="../../../assets/image/icon_ok.svg"></a>
              </ng-template>
            </div>
          </td>
          <!-- 删除按钮 -->
          <td nzLeft="49px" style="width: 49px;">
            <button nz-button [nzType]="'primary'" class="del" *ngIf="editCache[key].isdel"
              (click)="showModal(item)"></button>
            <a (click)="cancelEdit(key)" style="width: 45px;" *ngIf="!editCache[key].edit"><img
                src="../../../assets/image/icon_cancel.svg"></a>
          </td>
          <!-- 申請單號 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else applyID">{{item.applyID}}</ng-container>
            <ng-template #applyID>
              <input type="text" style="width: 140px;" nz-input [(ngModel)]="editCache[key]['data'].applyID"
                readonly="readonly" />
            </ng-template>
          </td>
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else union_order">{{item.union_order}}</ng-container>
            <ng-template #union_order>
              <input type="text" style="width: 240px;" nz-input [(ngModel)]="editCache[key]['data'].union_order"
               />
            </ng-template>
          </td>
          <!-- 料号 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else material_no">{{item.material_no}}</ng-container>
            <ng-template #material_no>
              <input type="text" style="width: 220px;" nz-input [(ngModel)]="editCache[key]['data'].material_no"
                readonly="readonly" />
            </ng-template>
          </td>
          <!-- 名称 -->
          <td class="input_first"
            style="cursor:pointer;max-width: 230px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
            title={{item.name}}>
            <ng-container *ngIf="editCache[key].edit; else name">{{item.name}}</ng-container>
            <ng-template #name>
              <input type="text" style="width: 230px;" nz-input [(ngModel)]="editCache[key]['data'].name"
                readonly="readonly" />
            </ng-template>
          </td>
          <!-- 单位 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else unit">{{item.unit}}</ng-container>
            <ng-template #unit>
              <input type="text" style="width: 100px;" nz-input [(ngModel)]="editCache[key]['data'].unit"
                readonly="readonly" />
            </ng-template>
          </td>
          <!-- 現有庫存 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else stock">{{item.stock}}</ng-container>
            <ng-template #stock>
              <input type="text" style="width: 100px;" nz-input [(ngModel)]="editCache[key]['data'].stock"
                readonly="readonly" />
            </ng-template>
          </td>
          <!-- 单据类型 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else applyType">{{item.applyType}}</ng-container>
            <ng-template #applyType>
              <input type="text" style="width: 100px;" nz-input [(ngModel)]="editCache[key]['data'].applyType"
                readonly="readonly" />
            </ng-template>
          </td>
          <!-- charge部门 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else charge_department">{{item.charge_department}}</ng-container>
            <ng-template #charge_department>
              <!-- <input type="text" style="width: 150px;" nz-input [(ngModel)]="editCache[key]['data'].charge_department" /> -->
              <nz-select [(ngModel)]="editCache[key]['data'].charge_department">
                <nz-option *ngFor="let item of chargeArr" [nzLabel]=item [nzValue]=item></nz-option>
              </nz-select>
            </ng-template>
          </td>
          <!-- 申請人 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else applicant">{{item.applicant}}</ng-container>
            <ng-template #applicant>
              <input type="text" style="width: 100px;" nz-input [(ngModel)]="editCache[key]['data'].applicant" />
            </ng-template>
          </td>
          <!-- 申请数量 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else quatity">{{item.quatity}}</ng-container>
            <ng-template #quatity>
              <input type="number" min="1" style="width: 100px;" nz-input
                [(ngModel)]="editCache[key]['data'].quatity" />
            </ng-template>
          </td>
          <!-- 备注 -->
          <td class="input_first"
            style="cursor:pointer;max-width: 150px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
            title={{item.remark}}>
            <ng-container *ngIf="editCache[key].edit; else remark">{{item.remark}}</ng-container>
            <ng-template #remark>
              <input type="text" style="width: 150px;" nz-input [(ngModel)]="editCache[key]['data'].remark" />
            </ng-template>
          </td>

        </tr>
      </tbody>
    </nz-table>
    <!-- 审批 -->
    <nz-modal [(nzVisible)]="addchecker" nzTitle="審批" (nzOnOk)="CheckOk()" (nzOnCancel)="CancelCheck2()"
      nzCancelText="拒绝" nzOkText="通过" style="text-align:center" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px',alignItems: 'center',
      display: 'flex',justifyContent: 'center'}">
      <div class="input_first" style="display: flex;align-items: center;">
        確認通過這筆訂單嗎？
        <!-- <div>審批人：</div>
        <input readonly style="text-indent: 12px;" type="text" [(ngModel)]="shenpiPerson" value='' name=''> -->
      </div>
      <div *nzModalFooter>
        <button nz-button nzType="default" (click)="CancelCheck()">拒绝</button>
        <button nz-button nzType="primary" (click)="CheckOk()">通过</button>
      </div>
    </nz-modal>
    <!-- 删除弹出框-->
    <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確定刪除嗎？</p>
    </nz-modal>
  </div>
</div>
